<template>
  <div class="category-set">
    <el-dialog
      title="新增车队长"
      :visible.sync="visible.showDialog"
      width="450px"
      center
      :close-on-click-modal="false"
      @closed="init"
    >
      <div class="content">
        <div class="line flex-left">
          <label class="title">UID</label>
          <el-input v-model="param.captain" size="medium" placeholder="车队长uid"></el-input>
        </div>
        <div class="line flex-left">
          <label class="title">车队名</label>
          <el-input v-model="param.fleet_name" size="medium" placeholder="车队名"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="medium"
          type="primary"
          @click="submit"
          :disabled="onSubmit"
          :loading="onSubmit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addCarLeader } from "./carTeam.service.js";
export default {
  props: ["visible"],
  data() {
    return {
      param: {
        captain: "",
        fleet_name: ""
      },
      onSubmit: false
    };
  },
  methods: {
    async submit() {
      this.onSubmit = true;
      const res = await addCarLeader(this.param);
      if (res.code === 1) {
        this.$emit("success");
        this.visible.showDialog = false;
        this.$notify.success({ title: "提示", message: "添加成功" });
      }
      this.onSubmit = false;
    },
    init() {
      this.param = {
        captain: "",
        fleet_name: ""
      };
    }
  }
};
</script>

<style lang="scss">
.category-set {
  .el-dialog__header {
    border-bottom: 1px solid #e9e9e9;
    padding: 15px;
    font-weight: 600;
  }
  .content {
    .line {
      line-height: 60px;
      .title {
        width: 4em;
        text-align: right;
        margin-right: 20px;
        flex-shrink: 0;
      }
    }
  }
}
</style>